<!-- 李向阳封装的表格组件 -->
<template>
  <div>
    <!-- 表格组件:表格显示多少条，完全取决于当前传入的tableData数据数组的长度决定，和分页无关，传多少条就会一次性显示多少条 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column :type="selection" width="auto"></el-table-column>

      <!-- 动态列渲染:普通数据列 -->
      <el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop"
        :width="column.width || 'auto'">
        <template v-slot="scope">
          <!-- 判断是否为图片 -->
          <span v-if="isImage(scope.row[column.prop])">
            <img :src="scope.row[column.prop]" alt="image" style="width: 100%; height: 10vh; object-fit: cover;" />
          </span>
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>


      <!-- 操作列:列中按钮 -->
      <el-table-column label="操作" v-if="operationColumn" :width="operationColumn.width || 'auto'">
        <template slot-scope="scope">
          <el-button v-for="(button, index) in operationColumn.operationButtons" :key="index"
            :plain="button.plain || false" :type="button.type || 'primary'" :size="button.size || 'small'"
            @click="button.action(scope.row)">
            {{ button.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 按钮区域：底部的按钮-->
    <div style="margin-top: 20px">
      <el-button v-for="(button, index) in buttons" :key="index" :type="button.type || 'primary'"
        :plain="button.plain || false" :size="button.size || 'medium '" @click="button.action">
        {{ button.label }}
      </el-button>
    </div>

    <!-- 分页组件：相当于一个个按钮->点击后重新请求指定的几条数据->将请求到的数据赋值给表格数据 -->
    <!-- 分页的下拉框会根据当前total的值自动计算，不需要管 -->
    <el-pagination v-if="pagination" :current-page="pagination.currentPage" :page-size="pagination.pageSize"
      :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @current-change="handlePageChange"
      @size-change="handleSizeChange" />
  </div>
</template>

<script>
export default {
  props: {
    //是否显示勾选框
    selection: {
      type: String,
      default: () => 'selection'
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 表格列配置
    columns: {
      type: Array,
      default: () => []
    },
    // 操作列按钮配置
    operationColumn: {
      type: Object,
      default: null
    },
    // 其他按钮配置
    buttons: {
      type: Array,
      default: () => []
    },
    // 分页配置
    pagination: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
    };
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    // 切换父亲传入的几行的选中状态
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          // 切换某些行的选中状态
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        //将所有的选中的取消选中状态
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 选中行变化
    handleSelectionChange(val) {
      console.log('当前选中的行：', val);
    },
    // 处理分页变化：页码变化
    handlePageChange(page) {
      this.$emit('page-change', page);
    },
    // 处理每页条数变化：分页下拉框，应该请求多少条数据，而不是原来的写死的5条了，可能是10，100了，告诉父亲组件，修改每次请求条数
    handleSizeChange(size) {
      this.$emit('size-change', size);
    },
    // 判断某个字段是否为图片地址
    isImage(value) {
      // 判断是否为有效的图片URL，支持查询参数
      const imageRegex = /\.(jpg|jpeg|png|gif|bmp|webp)(\?.*)?$/i;
      return imageRegex.test(value);
    }
  }
};
</script>

<style scoped lang="scss"></style>
